簡介:Sass又名SCSS,是CSS預處理器之一,它能讓你更好的、更輕松的工作。這個系列教程是《sass基礎篇》課程的進級,對Sass其它較有難度的部分進行講解,包括常用控制命令、函數及規律。
第1章 Sass的控制命令
Sass中控制命令指的是@if、@each、@for和@while。具有一定的邏輯判斷和循環遍歷能力,這個對于懂JavaScript或者后端語言的同學來說一點都不難。但在CSS中是不可思議的一件事情,最起碼到目前為止是不太可能的事情。但在Sass這樣的CSS預處理器語言中實現了。
第2章 Sass的函數功能-字符串與數字函數
本章節講解Sass字符串與數字函數。
第3章 Sass的函數功能-列表函數
本章節講解Sass列表函數。
- 編程: 3-1 列表函數簡介
- 編程: 3-2 length()函數
- 編程: 3-3 nth()函數
- 編程: 3-4 join()函數
- 編程: 3-5 append()函數
- 編程: 3-6 zip()函數
- 編程: 3-7 index()函數
- 編程: 3-8 Introspection函數
- 編程: 3-9 Introspection 函數 -type-of()
- 編程: 3-10 unit()函數
- 編程: 3-11 unitless()函數
- 編程: 3-12 comparable()函數
- 編程: 3-13 Miscellaneous函數
- 編程: 3-14 Map
- 編程: 3-15 Sass Maps的函數
- 編程: 3-16 Sass Maps的函數-map-get($map,$key)
- 編程: 3-17 Sass Maps的函數-map-has-key($map,$key)
- 編程: 3-18 Sass Maps的函數-map-keys($map)
- 編程: 3-19 Sass Maps的函數-map-values($map)、map-merge($map1,$map2)
- 編程: 3-20 Sass Maps的函數-map-remove($map,$key)、keywords($args)
第4章 Sass的函數功能-顏色函數
本章講解Sass中自帶的顏色函數。
- 編程: 4-1 RGB顏色函數-RGB()顏色函數
- 編程: 4-2 RGB顏色函數-RGBA()函數
- 編程: 4-3 RGB顏色函數-Red()、Green()、Blue()函數
- 編程: 4-4 RGB顏色函數-Mix()函數
- 編程: 4-5 HSL函數簡介
- 編程: 4-6 HSL函數-lighten()
- 編程: 4-7 HSL函數-saturate()
- 編程: 4-8 HSL函數-adjust-hue()函數
- 編程: 4-9 HSL函數-grayscale()函數
- 編程: 4-10 Opacity函數簡介
- 編程: 4-11 Opacity函數-alpha()、opacity()函數
- 編程: 4-12 Opacity函數-rgba()函數
- 編程: 4-13 Opacity函數-opacify()、fade-in()函數
- 編程: 4-14 Opacity函數-transparentize()、 fade-out()函數
- 編程: 4-15 顏色函數實戰——七色卡
第5章 Sass 的 @ 規則
Sass 支持所有 CSS3 的 @ 規則, 以及一些 Sass 專屬的規則,也被稱為“指令(directives)”。 這些規則在 Sass 中具有不同的功效。這一章就為大家講解。